import { useEffect, useState } from 'react';
import Taro, { FC, useReachBottom } from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import "taro-ui/dist/style/components/button.scss"; // 按需引入 
import { useRoomsFacade } from '@/hooks/useRoomsFacade';
import { getLogger } from '@/utils/log';
import { LIVE_TYPE, ROOM_STATUS } from '@/constants/room';
import { formatTime } from '@/utils';
import { RoomItem } from '@/models/response/roomRsp';
import './index.scss';

//观看历史
export const History: FC = () => {
  const logger = getLogger("/pages/my/history");

  //直播间缩略图规格
  const imgPostfix = "?imageView2/1/w/224/h/138";

  const [roomsFacade, pagination] = useRoomsFacade();

  const [dataList, setDataList] = useState([] as RoomItem[])

  const toDetails = (roomId: string) => {
    Taro.navigateTo({
      url: `/pages/liveRoom/LiveDetails/index?roomId=${roomId}`
    })
  }

  const liveState = (res: number) => {
    if (res === ROOM_STATUS.NOT_STARTED) return "未开始";
    if (res === ROOM_STATUS.STARTED) return "直播中";
    if (res === ROOM_STATUS.PAUSED) return "已暂停";
    if (res === ROOM_STATUS.ENDED) return "已结束";
    if (res === ROOM_STATUS.DELETED) return "已删除";
    if (res === ROOM_STATUS.BANNED) return "已封禁";
  }
  //监听系统通知
  useEffect(() => {
    //页面销毁时也销毁所有订阅，防止内存泄漏
    return () => {
      roomsFacade.destroy();

    };
  }, []);

  // usePullDownRefresh(() => {
  //   //上拉获取翻页记录
  //   roomsFacade.prevPage();
  //   console.log(pagination, '列表数据');
  // })

  useReachBottom(() => {
    //下拉获取翻页记录
    roomsFacade.nextPage();
    // console.log(1);

  })

  //下拉添加数据
  useEffect(() => {
    if (pagination.data && pagination.data.length > 0) {
      // 去重处理
      if (dataList.length > 0 && dataList[dataList.length - 1].roomId === pagination.data[pagination.data.length - 1].roomId) return;
      const list = dataList.concat(pagination.data as any);
      setDataList(list)
    }
  }, [pagination, dataList])

  return (
    <View className='index'>
      {/* 主体内容 */}
      <View className='main'>
        {
          // pagination.data && pagination.data.length > 0 && pagination.data.map(room => (
          dataList && dataList.length > 0 && dataList.map(room => (
            <View className='content' key={room.roomId} onClick={() => toDetails(room.roomId)}>
              <View className='left'>
                <View className='leftImg'>
                  <Image src={room.picUrl + imgPostfix} className='left_img'></Image>
                  <View className={room.status === ROOM_STATUS.NOT_STARTED || room.status === ROOM_STATUS.STARTED || room.status === ROOM_STATUS.PAUSED ? 'status' : 'status status-end'}>
                    <Text>{liveState(room.status)}</Text>
                  </View>
                  <View className='play'>
                    <Image src='https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/play.png' className='play_img'></Image>
                  </View>
                </View>
                <View className=' boxShadow'></View>
              </View>
              <View className='right'>
                <View className='title'>
                  <Text>{room.roomName}</Text>
                  <View className="live-type">
                    {room.type === LIVE_TYPE.TEXT
                      ? '图文直播' : room.type === LIVE_TYPE.AUDIO
                        ? '语音直播' : room.type === LIVE_TYPE.VIDEO
                          ? '视频直播' : room.type === LIVE_TYPE.OBS_REC
                            ? 'obs录播' : room.type === LIVE_TYPE.OBS
                              ? 'obs专业直播' : room.type === LIVE_TYPE.VR
                                ? 'VR全景直播' : '转播'
                    }
                  </View>
                </View>
                <View className='time'>
                  <Text>{formatTime(room.startTime)}</Text>
                </View>
                {/* <View className='Unit_name'>
                  <Text>{room.orgName}</Text>
                </View> */}
              </View>
            </View>
          ))
        }
        {!dataList || dataList.length === 0 && (
          <View className='background'>
            <View className='img'><Image src='https://leconglive-wxapp-1301839528.file.myqcloud.com/wxIcon/historyBJ.png' className='bj-img'></Image></View>
            <View className='text'>
              <Text>暂无播放历史</Text>
            </View>
          </View>
        )}
      </View>
    </View>
  )
}

export default History;